import React from 'react'
import Admin from "../../../layout/Admin";
import QuestionModel from "../../../model/question";
import {Modal, Table} from "antd";
import Comments from "./comments";
const log = console.log.bind(console)

class Question extends React.Component {

    constructor(props) {
        super(props)
        this.model = new QuestionModel()
        this.columns = [
            // Fake: [2, 2, 0, 0]
            // Id: 2
            // Option: ["非常了解", "了解", "一般", "不了解"]
            // Optiontype: 1
            // Title: "请问您对一球必应app了解么"
            {
                title: '题干',
                dataIndex: 'Title',
            },
            {
                title: '选项',
                dataIndex: 'Option',
                render: (options, record) => {
                    let key = 'Real'
                    if (this.props.fake) {
                        key = 'Fake'
                    }
                    if (Array.isArray(options)) {

                        return <div>
                            {options.map((option, index) => <div key={index}>
                                <span>{index + 1}: {option}({record[key][index]}%的人选择)</span>
                            </div>)}
                        </div>
                    } else {
                        return <a onClick={() => this.callModal('check')}>查看</a>
                    }
                }
            },
        ]
        this.state = {
            total: 0,
            list: [],
            modal: {
                check: false,
            },
        }
    }

    componentDidMount() {
        this.total()
        this.result()
    }

    total = () => {
        this.model
            .total()
            .then(res => {
                const data = res.data
                if (data.ok) {
                    this.setState({
                        total: data.count,
                    })
                }
            })
    }

    result = () => {
        this.model
            .result()
            .then(res => {
                const data = res.data
                if (data.ok === 1) {
                    this.setState({
                        list: data.res,
                    })
                }
            })
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    render() {
        return (
            <>
                <Modal
                    width='80%'
                    visible={this.state.modal.check}
                    onCancel={() => this.cancelModal('check')}
                    footer={null}
                >
                    <Comments />
                </Modal>
                <Admin>
                    <div className='list-container'>
                        <h1>总计{this.state.total}人次投票</h1>
                        <Table
                            dataSource={this.state.list}
                            columns={this.columns}
                            rowKey={(record, index) => index}
                        />
                    </div>
                </Admin>
            </>

        )
    }

}

export default Question